import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Input, message, TreeSelect } from 'antd';
import services from '../../../services/api';
import CustomForm from '../../../components/CustomForm';

@connect()
class MenuAdd extends Component {
  constructor(props) {
    super(props);
    this.api = 'menu';
    this.actionType = 'add';
    this.form = null;
    this.state = {
      treeData: []
    };
  }

  componentDidMount() {
    this.getTreeData();
  }

  getTreeData = () => {
    services[this.api].list({}).then(data => {
      if (data.code === 0) {
        this.setState({
          treeData: [
            {
              title: data.data.root.name,
              value: data.data.root.id,
              key: data.data.root.id,
              children: this.getTreeFromOrigin(data.data.root.children)
            }
          ]
        });
      } else {
        message.error(data.msg);
      }
    });
  };

  getTreeFromOrigin = menuList => {
    const treeData = [];
    for (var i in menuList) {
      const item = {
        title: menuList[i].name,
        value: menuList[i].id,
        key: menuList[i].id,
        children: this.getTreeFromOrigin(menuList[i].children)
      };
      treeData.push(item);
    }
    return treeData;
  };

  // componentDidMount() {
  //   this.resetData();
  // }

  // resetData = () => {
  //   const value = this.props.record ? this.props.record.value : undefined;
  //   const copyTree = deepCopy(this.props.treeData);
  //   const treeData = copyTree.map(item => {
  //     return this.disabledTree(item, value);
  //   });
  //   this.setState({
  //     treeData: treeData
  //   });
  // };

  // disabledTree = (item, value, disabled) => {
  //   if (item.value === value || disabled) {
  //     item.disabled = true;
  //   }
  //   if (item.children && item.children.length > 0) {
  //     item.children = item.children.map(it => {
  //       if (item.disabled) {
  //         return this.disabledTree(it, value, true);
  //       } else {
  //         return this.disabledTree(it, value);
  //       }
  //     });
  //   }
  //   return item;
  // };

  handleSubmit = () => {
    this.form.validateFields((err, values) => {
      if (!err) {
        if (this.props.actionType === 'update') {
          values.id = this.props.record.id;
        }
        services[this.api][this.props.actionType](values).then(data => {
          if (data.code === 0) {
            message.success(data.msg);
            this.props.dispatch({ type: 'menu/queryMenu', params: {} });
            this.props.closeModal();
          } else {
            message.error(data.msg);
          }
        });
      }
    });
  };

  render() {
    const { name, icon, route, parent_id, remark, seq } = this.props.record || {};
    const formItems = [
      {
        label: {
          label: '菜单名称',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'name',
        options: {
          initialValue: name,
          rules: [
            { required: true, message: '请输入菜单名称' },
            { max: 128, message: '最长128个字符' },
            { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' }
          ]
        },
        component: <Input placeholder='菜单名称' />
      },
      {
        label: {
          label: '菜单Icon',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'icon',
        options: {
          initialValue: icon,
          rules: [{ required: true, message: '请输入菜单Icon' }]
        },
        component: <Input placeholder='菜单Icon' />
      },
      {
        label: {
          label: '菜单路由',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'route',
        options: {
          initialValue: route,
          rules: [{ required: true, message: '请输入菜单路由' }]
        },
        component: <Input placeholder='菜单路由' />
      },
      {
        label: {
          label: '父级菜单',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'parent_id',
        options: {
          initialValue: parent_id,
          rules: [{ required: true, message: '请选父级菜单' }]
        },
        component: (
          <TreeSelect
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={this.state.treeData}
            placeholder='请选择父级菜单'
            treeDefaultExpandAll
          />
        )
      },
      {
        label: {
          label: '备注',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'remark',
        options: {
          initialValue: remark,
          rules: [
            { max: 256, message: '最长256个字符' }
          ]
        },
        component: <Input.TextArea placeholder='备注' />
      },
      {
        label: {
          label: '排序',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'menu_seq',
        options: {
          initialValue: seq || seq === 0 ? seq : 999,
          rules: [
            { required: true, message: '请输入排序数字' },
            { pattern: /\d+/, message: '必须是数字' }
          ]
        },
        component: <Input placeholder='菜单Icon' />
      }
    ];

    return (
      <CustomForm
        {...this.props}
        closeModal={this.props.closeModal}
        createForm={ref => (this.form = ref)}
        formItems={formItems}
        onHandleSubmit={this.handleSubmit}
        colNum={1}
      />
    );
  }
}

export default MenuAdd;
